<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>redux状态管理</title>
</head>
<body>
<div id="counter">
    <button id="reduce">-</button>
    <span>10</span>
    <button id="increase">+</button>
</div>
<script type="module">
    import { createState } from './js/redux.js'
    // 状态突变函数
    var mutation = (state = { count: 20 }, action) => {
        switch (action.type) {
            case 'ADD_COUNT':
                return { ...state, count: state.count + action.payload }
            case 'REDUCE_COUNT':
                return { ...state, count: state.count - action.payload }
            default:
                console.log('default', state)
                return state
        }
    }
    var { dispatch, getState, subscribe } = createState(mutation)
    var renderData = () => {
        document.querySelector('#counter span').innerHTML = getState().count
    }
    renderData()
    // 订阅
    subscribe(renderData)
    // 出发
    document.getElementById('increase').onclick = () => {
        dispatch({ type: 'ADD_COUNT', payload: 20 })
    }
    document.getElementById('reduce').onclick = () => {
        dispatch({ type: 'REDUCE_COUNT', payload: 2 })
    }
</script>
</body>
</html>
